https://codepen.io/ericcai/pen/JjQqWNJ

第三天的挑戰是製作一個點擊後能夠變形的菜單圖標，主要使用了 CSS3 的動畫和過渡效果來模擬一個變形動態，當點擊菜單圖標時，三條橫線會交互變成一個 "關閉" 圖示，並伴隨著平滑的動畫過渡。

主要技術點

• 自定義 CSS 變數：使用了 :root 裡的自定義變數來控制菜單圖標的高度、間距、以及動畫的節奏（cubic-bezier）。
• Flexbox 應用：透過 Flexbox 技術，將圖標元素置中。
• CSS 動畫：運用了 @keyframes 來設計點擊時三條線的動畫效果，當點擊菜單圖標時，橫線會旋轉並隱藏中間的一條線，實現菜單打開/關閉的效果。
• JavaScript 操作：當 DOM 完成加載後，使用 JavaScript 綁定點擊事件，來切換圖標的 active 狀態，進而觸發動畫效果。

具體挑戰內容

1. 菜單圖標的基礎設計：使用三條橫線來代表一個標準的 "漢堡" 菜單圖標。
2. 動畫效果：當點擊圖標時，第一條線向下移動並旋轉 45 度，第三條線向上移動並旋轉 135 度，而中間的線則縮小隱藏。
3. 回退效果：當再次點擊圖標時，動畫會回到原來的狀態，三條線變回初始的漢堡圖標。

總結：

這次挑戰主要是 CSS 動畫的應用，並結合 JavaScript 控制圖標的狀態切換。透過 @keyframes 來設計動畫，使得菜單圖標可以動態變化。難度適中，主要挑戰在於掌握動畫過渡的效果，Day 3 的難易度我給 3/5 分，有很大收穫。😄